import { createElement, ThHTMLAttributes, type FC } from 'react';
import classNames from 'classnames';
import { tableHeaderCellDefaultProps } from './defaultProps';
import type { TableCellOptions, TableHeaderCellOptions } from './type';
import TableCell from './TableCell';

export interface TableHeaderCellProps
  extends TableHeaderCellOptions,
    TableCellOptions,
    Omit<ThHTMLAttributes<HTMLTableCellElement>, 'color'> {}

const TableHeaderCell: FC<TableHeaderCellProps> = (props) => {
  const { className, sorted, children, forwardedRef, ...tableHeaderCellProps } = props;

  return createElement(
    TableCell,
    { as: 'th', forwardedRef, className: classNames({ sorted }, sorted, className), ...tableHeaderCellProps },
    children,
  );
};

TableHeaderCell.displayName = 'TableHeaderCell';
TableHeaderCell.defaultProps = tableHeaderCellDefaultProps;

export default TableHeaderCell;
